<!--
 * @Author: 陆成杰
 * @Date: 2022-06-23 14:17:04
 * @LastEditTime: 2022-07-03 13:33:28
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/material-manager/Material.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <div class="header">
      <div style="display: flex">
        <div class="header-title">素材名称:</div>
        <div class="header-input"><input type="text" /></div>
      </div>
      <div class="header-button">
        <button class="header-button-item1">重 置</button>
        <button class="header-button-item2">查 询</button>
      </div>
    </div>

    <div class="content">
      <div style="display: flex; justify-content: space-between">
        <div class="content-header">
          <div class="content-header-img">
            <img src="../../assets/material/all.png" alt="" />
            <div
              style="
                margin-top: 6px;
                color: darkgrey;
                font-size: 14px;
                margin-left: 5px;
              "
            >
              全部
            </div>
          </div>
        </div>
        <div class="content-btn">
          <div class="content-btn-item1"><button @click="upload">上传素材</button></div>
          <div class="content-btn-item2"><button>批量操作</button></div>
          <div class="content-btn-img1">
            <img src="../../assets/material/list.svg" alt="" />
          </div>
          <div class="content-btn-img2">
            <img src="../../assets/material/box.svg" alt="" />
          </div>
        </div>
      </div>

      <div>
        <el-table
          :data="state.tableData"
          style="width: 100%"
          size="default"
          class="el-table"
          :header-cell-style="{ background: 'rgb(35, 39, 56)' }"
          :cell-style="{ background: 'rgb(41, 45, 62)', color: '#fff' }"
        >
          <el-table-column prop="num" label="" width="50" />
          <el-table-column prop="key" label="缩略图" width="180">
            <template #default="scope">
              <el-avatar
                shape="square"
                :size="60"
                fit="fill"
                :src="scope.row.key"
              ></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="mimeType" label="素材名称" width="180" />
          <el-table-column prop="px" label="分辨率" width="" />
          <el-table-column prop="fsize" label="大小(KB)" width="120" />
          <!-- <el-table-column prop="program" label="引用节目" width="100" /> -->
          <el-table-column prop="endUser" label="作者" width="100" />
          <el-table-column prop="putTime" label="更新时间" width="210" />
          <el-table-column prop="do" label="操作" width="200">
            <template #default="scope">
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                预览
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                重命名
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                下载
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                删除
              </button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <UploadMaterial ref="isShow"></UploadMaterial>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import UploadMaterial from "./material-children/UploadMaterial.vue"
import { getList } from "../../axios/material"
import moment from "moment";
const state = reactive({
  tableData: []
})
// const tableData = [
  // {
  //   num: 1,
  //   pic:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  //   name: "Finish this system",
  //   px: '1920x1080',
  //   size: '106.4 KB',
  //   program: '1',
  //   auther: 'luorl',
  //   update: '2022-6-27 20:19:37'
  // },
// ];

onMounted(() => {
  materialList()
})

const materialList = () => {
  getList().then(res => {
    // console.log(res);
    state.tableData = res.data
    console.log(state.tableData);
    for(let i=0;i<state.tableData.length;i++){
      state.tableData[i].key = 'http://cdn.yuzzl.top/' + state.tableData[i].key
      let str = state.tableData[i].key
      str = str.split('/').at(-1)
      state.tableData[i].mimeType = str
      state.tableData[i].endUser = "lcj"
      const time = new Date(state.tableData[i].putTime/10000)
      state.tableData[i].putTime = moment(time).format("YYYY-MM-DD HH:mm:ss")
    }
  })
}
const isShow = ref()

const upload = () => {
  console.log(isShow.value);
  isShow.value.dialogFormVisible = true
}
</script>

<style lang="less" scoped>
.header {
  width: 99%;
  height: 80px;
  background-color: rgb(41, 45, 62);
  margin-left: 0.5%;
  display: flex;
  justify-content: space-between;
  &-title {
    line-height: 80px;
    color: #fff;
    margin-left: 25px;
    font-size: 14px;
  }
  &-input input {
    width: 600px;
    height: 25px;
    margin-top: 25px;
    margin-left: 10px;
    background-color: rgb(35, 39, 56);
    border: none;
    color: #fff;
    padding-left: 10px;
    outline-color: rgb(24, 144, 255);
  }
  &-button {
    margin-right: 30px;
    margin-top: 22px;
    &-item1 {
      width: 70px;
      height: 35px;
      border: none;
      border-radius: 1px;
    }
    &-item2 {
      width: 70px;
      height: 35px;
      margin-left: 10px;
      background-color: rgb(24, 144, 255);
      border: none;
      color: #fff;
      border-radius: 1px;
    }
  }
}
.content {
  width: 99%;
  margin-left: 0.5%;
  height: 585px;
  background-color: rgb(41, 45, 62);
  margin-top: 20px;

  // color: darkgrey;

  &-header {
    &-img {
      display: flex;
      padding: 25px;
    }
  }
  &-btn {
    display: flex;
    margin-top: 25px;
    margin-right: 30px;
    &-item1 button {
      width: 80px;
      height: 35px;
      background-color: rgb(24, 144, 255);
      border: none;
      color: #fff;
      border-radius: 1px;
    }
    &-item2 button {
      width: 80px;
      height: 35px;
      color: darkgray;
      border: none;
      border-radius: 1px;
      margin-left: 20px;
    }
    &-img1 img,
    &-img2 img {
      width: 20px;
      height: 20px;
    }
    &-img1,
    &-img2 {
      margin-left: 20px;
      margin-top: 6px;
    }
  }
}
.btns {
  border: none;
  background: none;
  color: rgba(0, 98, 255, 0.83);
  font-size: 14px;
}
</style>